<template>
    <el-main class="resourcesBox">
        <div class="resourcesContent">

            <div class="title">
                <label>教研资源</label>
                <el-button type="text" style="margin-right: 15px;" @click="isSupervise = !isSupervise">
                    {{isSupervise?'退出管理':'管理'}}
                </el-button>
                <el-checkbox v-model="isAll" v-if="isSupervise">全选</el-checkbox>
                <el-button type="text" style="color: #F56C6C;" v-if="isSupervise">删除</el-button>
                <el-button type="primary" size="mini" class="increaseBtn" v-if="!isSupervise"
                    @click="isEditOrAdd = true">上传资源
                </el-button>
            </div>

            <div class="resources">
                <div class="resourcesList">
                    <el-checkbox v-if="isShow" class="checked"></el-checkbox>
                    <resource-common></resource-common>
                </div>
            </div>

            <div class="block">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[10, 15, 20, 35]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="上传资源" center :visible.sync="isEditOrAdd" width="45%">
            <el-form :model="dialogForm" label-width="85px">
                <el-form-item label="阶段：">
                    <el-select size="mini" v-model="dialogForm.stage" placeholder="请选择阶段">
                        <el-option label="学前" value="0"></el-option>
                        <el-option label="小学" value="1"></el-option>
                        <el-option label="初中" value="2"></el-option>
                        <el-option label="高中" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="一级分类：">
                    <el-radio-group size="mini" v-model="dialogForm.oneType">
                        <el-radio label="0">备课资源</el-radio>
                        <el-radio label="1">备考资源</el-radio>
                        <el-radio label="2">升学资源</el-radio>
                        <el-radio label="3">专题资源</el-radio>
                        <el-radio label="4">课外拓展</el-radio>
                        <el-radio label="5">校本资源</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="二级分类：" v-if="dialogForm.oneType == 5">
                    <el-radio-group size="mini" v-model="dialogForm.towType">
                        <el-radio label="0">备课资源</el-radio>
                        <el-radio label="1">备考资源</el-radio>
                        <el-radio label="2">升学资源</el-radio>
                        <el-radio label="3">专题资源</el-radio>
                        <el-radio label="4">课外拓展</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="学科：">
                    <el-select size="mini" v-model="dialogForm.subject" placeholder="请选择学科">
                        <el-option label="语文" value="0"></el-option>
                        <el-option label="数学" value="1"></el-option>
                        <el-option label="英语" value="2"></el-option>
                        <el-option label="化学" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="版本：">
                    <el-select size="mini" v-model="dialogForm.edition" placeholder="请选择版本">
                        <el-option label="人教版" value="0"></el-option>
                        <el-option label="湘教版" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="册别：">
                    <el-select size="mini" v-model="dialogForm.bookType" placeholder="请选择版本">
                        <el-option label="一年级上册" value="0"></el-option>
                        <el-option label="一年级下册" value="1"></el-option>
                        <el-option label="二年级上册" value="2"></el-option>
                        <el-option label="二年级下册" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类：" v-if="dialogForm.oneType < 4">
                    <el-select size="mini" v-model="dialogForm.towTypeCopy" placeholder="请选择版本">
                        <el-option label="专题讲座" value="0"></el-option>
                        <el-option label="专项训练" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类：" v-if="dialogForm.oneType == 5">
                    <el-select size="mini" v-model="dialogForm.threeType" placeholder="请选择版本">
                        <el-option label="教案" value="0"></el-option>
                        <el-option label="课件" value="1"></el-option>
                        <el-option label="学案" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源文件：">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                        :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="资源名称：">
                    <el-input size="mini" v-model="dialogForm.name" style="width: 193px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="isEditOrAdd = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="isEditOrAdd = false">确 定</el-button>
            </div>
        </el-dialog>
    </el-main>
</template>

<script>
    import ResourceCommon from '@/components/resource/resourceCommon'
    export default {
        components: {
            ResourceCommon
        },
        data() {
            return {
                isAll: false,
                isSupervise: false,
                radioGroup: {
                    stage: '1', // 阶段
                    oneType: '1', // 一级分类
                    copyOneType: '1',
                    subject: '0', // 学科
                    edition: '0', // 版本
                    bookType: '0', // 册别
                    twoType: '0', // 二级分类
                    threeType: '0', // 三级分类
                    classify: '0', // 分类
                    year: '0', // 年份

                },
                page: 1,
                pageSize: 12,
                total: 400,
                regionalLinkage: {
                    province: '', //省
                    city: '', // 市
                    area: '', // 区
                },
                province: [{
                    id: 1,
                    name: '贵州省',
                    value: 1
                }, {
                    id: 2,
                    name: '北京市',
                    value: 2
                }, {
                    id: 3,
                    name: '广东省',
                    value: 3
                }],
                city: [{
                    id: 1,
                    name: '贵阳市',
                    value: 1
                }, {
                    id: 2,
                    name: '铜仁市',
                    value: 2
                }, {
                    id: 3,
                    name: '遵义市',
                    value: 3
                }],
                area: [{
                    id: 1,
                    name: '德江县',
                    value: 1
                }, {
                    id: 2,
                    name: '思南县',
                    value: 2
                }, {
                    id: 3,
                    name: '凤冈县',
                    value: 3
                }],
                isEditOrAdd: false,
                dialogForm: {
                    stage: '',
                    oneType: '',
                    towType: '',
                    towTypeCopy: '',
                    threeType: '',
                    subject: '',
                    edition: '',
                    bookType: '',
                    name: ''
                },
                fileList: [],
            }
        },
        methods: {

            // 每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
            },

            // 当前页
            handleCurrentChange(val) {
                this.page = val
            },

            // 阶段切换
            handleStageChange(val) {

            },

            // 一级分类切换
            handleOneTypeChange(val) {

            },

            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePreview(file) {
                // console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
        },
    }
</script>

<style lang="scss" scoped>
    .resourcesBox {
        // margin: 0 auto !important;
        // width: 80% !important;
        // padding: 0 !important;

        .resourcesContent {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            width: 80%;

            .title {
                text-align: left;
                position: relative;

                &>label {
                    color: #303133;
                    margin-right: 15px;
                    font-size: 16px;
                }

                .increaseBtn {
                    position: absolute;
                    top: 8px;
                    right: 0;
                }
            }

            .typeWarp {
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;


                .typelist {
                    text-align: left;
                    margin-top: 20px;

                    .typeName {
                        display: inline-block;
                        width: 60px;
                        text-align: justify;
                        text-align-last: justify;
                        font-size: 14px;
                        color: #303133;
                    }

                    .elRadio>.el-radio-button__inner {
                        border: none;
                        margin-left: 10px;
                    }

                    .elRadio.el-radio-button:first-child>.el-radio-button__inner,
                    .elRadio.el-radio-button:last-child>.el-radio-button__inner {
                        border: none;
                        border-radius: 0;
                    }

                    .radioRroup {
                        width: calc(100% - 80px);
                        vertical-align: top;
                    }
                }
            }

            .resourcesList {
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;
                box-sizing: border-box;
                padding: 0 20px;
                margin: 30px 0;

                .resources {
                    box-sizing: border-box;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #DCDFE6;
                    position: relative;
                    text-align: left;
                    margin-top: 20px;

                    .resourcesName {
                        font-size: 14px;
                        color: #303133;
                        cursor: pointer;

                        .check {
                            margin-right: 10px;
                        }

                        .officeType {
                            display: inline-block;
                            width: 25px;
                            height: 25px;
                            text-align: center;
                            line-height: 25px;

                        }

                        .offPPT {
                            border: 1px solid orange;
                            color: orange;
                        }

                        .offWORD {
                            border: 1px solid #46A3FF;
                            color: #46A3FF;
                        }

                        .offXLS {
                            border: 1px solid #67C23A;
                            color: #67C23A;
                        }

                        .resourcesType {
                            display: inline-block;
                            box-sizing: border-box;
                            padding: 2px 4px;
                            color: #409EFF;
                            border: 1px solid #409EFF;
                            margin: 0 10px;
                        }

                        label {
                            cursor: pointer;
                        }
                    }

                    .time {
                        box-sizing: border-box;
                        padding-left: 36px;
                        font-size: 14px;
                        color: #909399;
                        margin-top: 10px;

                        .downloadCount {
                            margin-left: 14px;
                        }
                    }

                    .operation {
                        position: absolute;
                        top: 10px;
                        right: 0;
                    }

                }
            }
        }
    }
</style>